<script lang="ts" setup>
import { Finished } from "@element-plus/icons-vue";
import DetailDialog from "./components/detail-dialog.vue";
import Filter from "./components/filter.vue";
import Sheet from "./components/sheet.vue";
import { createState,injectState } from "./state";
import {
	whManagerBsTbParkGridPatrolRecordNumStatisticYearUsingGet,
	whManagerBsTbParkGridPatrolRecordFileStatisticYearUsingGet,
  whManagerBsTbParkGridPatrolRecordGetPageUsingPost
} from "@/genapi/wh";
import { onMounted, ref } from "vue";
definePage({
	meta: { title: "巡检记录", order: 3 },
});
defineOptions({ name: "IndexPage" });
const { page, detailDialogRef } = createState();

const year = ref("2024");

let value = ref({
	gridList: [
		// "网格1",
		// "网格2",
		// "网格3",
		// "网格4",
		// "网格5",
		// "网格6",
		// "网格7",
		// "网格8",
		// "网格9",
		// "网格10",
	],
	num1: [],
  // num1:[]
});
onMounted(async () => {
  
  let res = await whManagerBsTbParkGridPatrolRecordGetPageUsingPost({data:{current:page.currentPage.value}})
  // console.log(res.data?.records)
  for(let i = 0; i<res.data?.records?.length; i++){
    value.value.gridList.push(res.data?.records[i].gridName)
    value.value.num1.push(res.data?.records[i].recordNum)
  }
  // console.log(value.value.gridList)
  // console.log(value.value.num1)
})
const option = ref({
	grid: {
		containLabel: true,
		left: 0,
		top: 10,
		bottom: 5,
		right: 15,
	},
	tooltip: {
		appendToBody: true,
		// trigger: "axis",
		// axisPointer: {
		// 	type: "line",
		// 	lineStyle: {
		// 		opacity: 0,
		// 	},
		// },
		// formatter: function (prams) {
		// 	if (prams[0].data === 0) {
		// 		return "数量：0%";
		// 	} else {
		// 		return "数量：" + prams[0].data;
		// 	}
		// },
		trigger: "axis",
		axisPointer: {
			type: "shadow",
		},
	},
	xAxis: {
		type: "category",
		data: value.value.gridList,
		axisLabel: {
			fontSize: 12,
			color: "#798A9B",
		},
		axisLine: {
			lineStyle: {
				color: "#243753",
			},
		},
	},
	yAxis: {
		type: "value",
		axisLabel: {
			fontSize: 12,
			color: "#798A9B",
		},
		axisLine: {
			show: true,
			lineStyle: {
				color: "#283352",
			},
		},
	},
	series: [
		{
			name: "记录总数",
			data: value.value.num1,
			type: "bar",
			stack: "total",
			barWidth: "25%",
			xAxisIndex: 0,
			yAxisIndex: 0,
			itemStyle: {
				color: "#409EFF",
			},
			zlevel: 11,
			showBackground: true,
			backgroundStyle: {
				color: "rgba(180, 180, 180, 0.2)",
				width: "120%",
			},
		},
	],
});

const recordsCount = ref<number>();
const finishedRate = ref<number>();
const imagesCount = ref<number>();
const videosCount = ref<number>();

const getRecordNumAndRate = async () => {
	const { data } =
		await whManagerBsTbParkGridPatrolRecordNumStatisticYearUsingGet({
			path: {
				year: Number(year.value),
			},
		});
	recordsCount.value = data?.totalNum;
	finishedRate.value = data?.completeRate;
};

const getImageAndVideoCount = async () => {
	const { data } =
		await whManagerBsTbParkGridPatrolRecordFileStatisticYearUsingGet({
			path: {
				year: Number(year.value),
			},
		});
	imagesCount.value = data?.imageNum;
	videosCount.value = data?.videoNum;
};

function yearSelect() {
	getRecordNumAndRate();
	getImageAndVideoCount();
}
</script>

<template>
	<div class="statisticPanel">
		<div class="statisticBox">
			<div class="yearPicker">
				<div flex flex-col>
					<span>巡查记录分析</span>
					<el-date-picker
						style="width: 90px"
						v-model="year"
						type="year"
						placeholder="选择年份"
						:clearable="false"
						@change="yearSelect"
						format="YYYY"
						value-format="YYYY"
					/>
				</div>
				<div flex mt-3.5>
					<div w-10 h-10 mr-3>
						<img
							src="../../../../../public/编组 4 7.png"
							alt=""
							w-full
							h-full
						/>
					</div>
					<div mb-1>
						<div text-lg class="text-[#409EFF]">
							{{ recordsCount ?? "0" }}/{{ finishedRate ?? "0" }}%
						</div>
						<div text-sm class="text-[#838383]">记录总数/任务完成率</div>
					</div>
				</div>
				<div flex mt-3.5>
					<div w-10 h-10 mr-3>
						<img
							src="../../../../../public/编组 4 7.png"
							alt=""
							w-full
							h-full
						/>
					</div>
					<div mb-1>
						<div text-lg class="text-[#409EFF]">
							{{ imagesCount ?? "0" }}/{{ videosCount ?? "0" }}
						</div>
						<div text-sm class="text-[#838383]">图片/视频总数</div>
					</div>
				</div>
			</div>

			<el-divider direction="vertical" />
			<div class="chartBox">
				<BaseEchart :option="option"></BaseEchart>
			</div>
		</div>
	</div>
	<page-content>
		<template #header>
			<Filter />
		</template>
		<Sheet />
		<DetailDialog ref="detailDialogRef" />
		<template #footer>
			<el-pagination
				v-model:current-page="page.currentPage.value"
				v-model:page-size="page.pageSize.value"
				:disabled="page.isLoading.value"
				:total="page.total.value"
			/>
		</template>
	</page-content>
</template>

<style scoped lang="scss">
.statisticPanel {
	background-color: #fff;
	margin: 20px 20px 0px 20px;
	height: 120px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.statisticBox {
		width: 95%;
		height: 80%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0px 15px;
		background-color: #cdeaff59;
		.yearPicker {
			width: 40%;
			height: 75%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			span {
				font-size: 18px;
				font-weight: 600;
			}
		}
		.chartBox {
			width: 50%;
			height: 100%;
		}
	}
}
</style>
